<template>
	<div class="mp-con-wrapper">
		<!--定位-->
		<ul class="mp-listitem-con border-top clearfix">
			<li class="position border-right"><span class="iconfont">&#xe604;</span>定位失败</li>
			<li class="must"><span class="iconfont">&#xe7fc;</span>必游榜单</li>
		</ul>
		<!--优惠-->
		<ul class="mp-activity-con border-top  clearfix" >
			<li class="mp-activity-item-left border-rightbottom">
				<a href="#" title="门票特卖"></a>
			</li>
			<li class="mp-activity-item-right border-bottom">
				<a href="#" title="门票特卖"></a>
			</li>
		</ul>
		<!--本周热门榜单-->
		<div class="mp-group">
			<div class="mp-group-title">
				<img 
					class="mp-group-icon"
					src="https://imgs.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" 
					alt="本周热门榜单" />
				<span class="mp-title">本周热门榜单</span>
				<a href="#" class="mp-group-more">全部榜单<span>&nbsp></span></a>
			</div>
			<ul class="mp-hotsale-list">
				<li class="mp-hotsale-item" v-for="item of list01" :key="item.id">
					<a href="#">
						<div class="mp-hotsale-tag">
							<img 
								class="mp-hotsale-tagimg" 
								:src="item.tagImgSrc" 
								:alt="item.tagImgAlt" />
						</div>
						<div class="mp-hotsale-imgcon">
							<img 
								:src="item.conImgSrc" 
								:alt="item.imgAlt" />
						</div>
						<div class="mp-hotsale-sight">{{item.imgAlt}}</div>
						<div class="mp-hotsale-price">
							<span class="mpg-price">
								¥<em>{{item.hotSalePrice}}</em>
							</span>
							起
						</div>
					</a>
				</li>
			</ul>
		</div>
		<!--热销推荐-->
		<div class="recommend-title">热销推荐</div>
		<div class="recommend-wraper">
			<ul class="recommend-item-list">
				<router-link 
					tag="li"
					class="item border-bottom" 
					v-for="item of list02" 
					:key="item.id"
					:to="'/detail/' + item.id"
				>
					<a href="#" class="item-con clearfix">
						<div class="item-img">
							<img :src="item.imgSrc" :alt="item.imgAlt" />
						</div>
						<div class="item-info">
							<div class="item-title title-ellipsis">{{item.imgAlt}}</div>
							<div class="item-comment">
								<strong class="item-icon01" :width="item.iconWidth">
														<i class="iconfont">&#xe610;</i>
														<i class="iconfont">&#xe610;</i>
														<i class="iconfont">&#xe610;</i>
														<i class="iconfont">&#xe610;</i>
														<i class="iconfont">&#xe610;</i>
													</strong>
								<span class="item-icon02">
														<i class="iconfont">&#xe610;</i>
														<i class="iconfont">&#xe610;</i>
														<i class="iconfont">&#xe610;</i>
														<i class="iconfont">&#xe610;</i>
														<i class="iconfont">&#xe610;</i>
													</span>
							</div>
							<span class="item-comment-num">{{item.commentNum}}条评论</span>
							<div class="item-price">
								<span class="price">¥<em class="price-num">{{item.priceNum}}</em></span>起
								<span class="item-address">{{item.itemAddr}}</span>
							</div>
						</div>
					</a>
				</router-link>			
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'HomeRecommend',
		props: {
			list01: Array,
			list02: Array
		},
		data () {
			return {

			}
		}
	}
</script>

<style lang="stylus" scoped>
	.mp-listitem-con
		background: #fff
		.position,.must
			float: left
			width: calc(50% - 0.01rem / 2) 
			text-align: center
			height: 0.48rem
			line-height: 0.48rem
	.mp-activity-con
		background: #fff
		margin-top: 0.1rem
		.mp-activity-item-left
			background: url(https://imgs.qunarzz.com/piao/fusion/1811/12/999862443f79a902.png) center center no-repeat
			background-size: auto 100%
		.mp-activity-item-right
			background: url(https://imgs.qunarzz.com/piao/fusion/1811/d5/20dc542eb839c702.png) center center no-repeat
			background-size: auto 100%
		.mp-activity-item-left,.mp-activity-item-right
			height: 0.68rem
			float: left
			width: calc(50% - 0.01rem / 2)
	.mp-group
		margin-top: 0.1rem
		background: #fff
		.mp-group-title
			padding: 0.16rem 0
			.mp-group-icon
				width: 0.15rem
				height: 0.15rem
				margin-left: 0.12rem
				vertical-align: top
			.mp-title
				font-size: 0.16rem
			.mp-group-more
				float: right
				margin-right: 0.18rem
				color: #616161
		.mp-hotsale-list
			padding: 0 .12rem
			overflow-x: scroll
			white-space: nowrap
			li:not(:first-child)
				margin-left: 0.06rem
			.mp-hotsale-item
				position: relative
				display: inline-block
				width: 1rem
				padding: .04rem 0 .1rem
				a
					width: 100%
					height: 100%
					.mp-hotsale-tag
						position: absolute
						top: 0
						left: 0
						width: 0.42rem
						height: 0.2rem
						.mp-hotsale-tagimg
							width: 100%
				.mp-hotsale-imgcon
					overflow: hidden
					width: 1rem
					height: 0
					padding-bottom: 100%
					background: none
					img
						width: 1rem
						height: 1rem
				.mp-hotsale-sight
					display: block
					margin-top: .06rem
					color: #212121
					font-size: .12rem
					line-height: .16rem
					text-align: center
					overflow: hidden
					width: 100%
					white-space: nowrap
					text-overflow: ellipsis 
				.mp-hotsale-price
					display: block
					font-size: .12rem
					line-height: .18rem
					text-align: center
					color: #616161
					.mpg-price
						color: #ff8300
	.recommend-title
		line-height: 0.4rem
		height: 0.4rem
		margin-left: 0.13rem
		font-size: 0.14rem	
	.recommend-wraper
		background: #fff
		.recommend-item-list
			margin-left: 0.12rem
			.item
				padding: 0.1rem 0
				.item-con
					display: block
					width: 100%
					height: 100%
					.item-img
						float: left
						width: 1rem
						height: 1rem
						img
							width: 100%
					.item-info
						position: relative
						display: block
						overflow: hidden
						padding-left: 0.12rem
						color: #616161
						font-size: 0.16rem
						.item-title
							margin-top: 0.16rem
						.title-ellipsis
							overflow: hidden
							width: 100%
							white-space: nowrap
							text-overflow: ellipsis
						.item-comment
							position: relative
							display: inline-block
							margin-top: 0.12rem
							font-size: 0.12rem
							width: 0.62rem
							height: 0.16rem
							padding-top: 0.02rem
							vertical-align: bottom
							.item-icon01,.item-icon02
								position: absolute
								color: #e0e0e0
								letter-spacing: -0.04rem
								margin-top: -0.04rem
							.item-icon01
								z-index: 1
								overflow: hidden
								height: 0.16rem
								color: #ffb436
								white-space: nowrap
						.item-comment-num
							display: inline-block
							margin-left: 0.14rem
							font-size: 0.12rem
							margin-top: -0.08rem
							vertical-align: middle
						.item-price
							margin-top: 0.16rem
							font-size: 0.12rem
							.price
								color: #ff8300
								.price-num
									font-size: 0.22rem
							.item-address
								position: absolute
								right: 0.12rem
								bottom: 0.04rem
								font-size: 0.12rem
</style>
